<template>
	<view class="contain">
		<!-- 上部分图片 -->
		<view class="containTop">
			<image :src="getImgUrl(shopData.shopsLogo)" mode=""></image>
		</view>
		<!-- 下部分商铺信息 -->
		<view class="containBottom">
			<view class="containBottomContain">
				<!-- 商铺详情 -->
				<view class="containBottomContainTop">
					<!-- 商铺logo -->
					<view class="containBottomCtLeft">
						<view class="containBottomCtLeftImage">
							<image :src="getImgUrl(shopData.shopsLogo)"
								mode=""></image>
						</view>
					</view>
					<!-- 商家详情-右部分- 地址 & vx号 & 店铺名称 -->
					<view class="containBottomCtRight">
						<view class="containBottomCtRightTop">
							<view class="containCtTopLeft">
								<!--店铺名称  -->
								<view class="containCtTopLeftTop">
									{{shopData.shopsName ?shopData.shopsName :'暂无'}}
								</view>
								<!-- 店铺地址 -->
								<view class="containCtTopLeftBottom">
									地址：<text>{{shopData.address ? shopData.address :'暂无'}}</text>
								</view>
							</view>
							<view class="containCtTopRight">
								<view class="containCtTopRightCenter">
									{{shopData.category ?shopData.category :'暂无'}}
								</view>
							</view>
						</view>
						<view class="containBottomCtRightBottom">
							<!-- vx号码 -->
							<scroll-view scroll-y="true">
								<view class="containBottomCtitms" v-for="(item,index) in shopData.weixins" :key="index">
									<image src="@/static/merchantInfo/vxtubiao.svg" mode=""></image>
									<text>{{item}}</text>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				<view class="containBottomContainCenter">
					门店图片
				</view>
				<!-- 门店宣传图片 -->
				<view class="containBottomContainBottom">
					<scroll-view scroll-y="true">
						<image :src="getImgUrl(item)" mode="" v-for="(item,index) in shopData.advertises" :key="index">
						</image>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import getImgUrl from '../../utils/img.js'
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getShop
	} from '@/api/info.js'
	const id = ref(0)
	const shopData = ref({
		address: '', //详细地址
		province: '', //省
		county: '', //市
		city: '', //县
		shopsName: '', //店铺名称
		weixin: '', //vx
		weixins: [], //所有vx号
		shopsLogo: '', //门店logo
		advertises: [] //门店宣传图片
	})
	// 根据 id 查询商铺信息
	onLoad((option) => {
		id.value = Number(option.id)
		getShop({
			id: id.value
		}).then(res => {
			shopData.value = res.data
			if(shopData.value.category.length > 4){
				shopData.value.category = shopData.value.category.slice(0,4) + '...'
			}
			if(!res.data.shopsLogo){
				shopData.value.shopsLogo = getImgUrl(shopData.value.advertises[0])
			}
		})
	})
</script>
<style lang="scss" scoped>
	.contain {
		width: 100vw;
		height: 100vh;
		background: linear-gradient(to bottom, #dae6ff, 60%, #f6f9ff);

		// 上部分图片
		.containTop {
			width: 100vw;
			height: 50vh;
			background-color: #fff;
			border-radius: 20rpx;

			image {
				width: 100vw;
				height: 50vh;
				border-radius: 20rpx;
			}
		}

		.containBottom {
			width: 100vw;
			height: 50vh;
			display: flex;
			justify-content: center;
			position: relative;

			// 下部分商铺详情
			.containBottomContain {
				width: 92%;
				height: 50vh;
				border: 1rpx solid #dae6ff;
				background-color: #fff;
				border-radius: 20rpx;
				position: absolute;
				top: -40%;

				// 商铺详情
				.containBottomContainTop {
					width: 100%;
					height: 35%;
					border-radius: 20rpx;
					display: flex;

					//商铺详情-头像
					.containBottomCtLeft {
						width: 35vw;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;

						.containBottomCtLeftImage {
							width: 120rpx;
							height: 120rpx;
							border-radius: 20rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
								border: 1rpx solid #dae6ff;
							}
						}
					}

					//商家详情-右部分
					.containBottomCtRight {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;


						// 商家详情-右部分-上部分
						.containBottomCtRightTop {
							width: 100%;
							height: 45%;
							border-radius: 20rpx;
							display: flex;

							.containCtTopLeft {
								width: 70%;
								height: 100%;
								padding-top: 10rpx;

								.containCtTopLeftTop {
									font-weight: 600;
									font-size: 30rpx;

								}

								// 地址
								.containCtTopLeftBottom {
									width: 95%;
									height: 100rpx;
								}
							}

							.containCtTopRight {
								width: 30%;
								padding-top: 20rpx;
								padding-right: 20rpx;
								border-radius: 20rpx;

								.containCtTopRightCenter {
									width: 100%;
									height: 70%;
									border-radius: 20rpx;
									background-color: #adbdf9;
									color: #fff;
									border-radius: 20rpx;
									display: flex;
									align-items: center;
									justify-content: center;
								}
							}
						}

						// 商家详情-右部分-下部分
						.containBottomCtRightBottom {
							width: 100%;
							height: 50%;
							margin-top: 50rpx;
							display: flex;
							.containBottomCtitms {
								width: 70%;

								image {
									width: 50rpx;
									height: 50rpx;

								}
							}
						}
					}
				}

				// 门店图片
				.containBottomContainCenter {
					width: 100%;
					height: 100rpx;
					padding-left: 20rpx;
					font-size: 40rpx;
					display: flex;
					align-items: center;
				}

				// 门店宣传图片
				.containBottomContainBottom {
					width: 100%;
					height: 50%;
					display: flex;
					flex-wrap: wrap;
					padding: 0 10rpx;

					image {
						width: 22%;
						height: 43%;
						margin-left: 15rpx;
						border-radius: 20rpx;
					}
				}
			}
		}
	}
</style>